<script>
import DialogOfSave from "./components/DialogOfSave.vue";

export default {
  components: {DialogOfSave},
  data(){
    return {
      sensorUnitList:[]
    }
  },
  mounted(){
    this.getAll();
  },
  methods: {
    getAll(){
      // /bus-iot-web/admin/sensorUnit/getAll
      this.$kt.request.send({
        uri: "/bus-iot-web/admin/sensorUnit/getAll",
        data:{},
        stateSuccess: (res) => {
          this.sensorUnitList = res.data;
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    }

  }
}
</script>

<template>
<div>

  <div
      v-for="item in sensorUnitList"
      class="card">
    <div class="card-title">
      <div class="card-title-a">Sensor unit: </div>
      <div class="card-title-b">{{ item.name }}</div>
    </div>
    <div style="height: 10px"></div>

    <div>
      <img
          class="card-img"
          :src="$kt.file.visit(item.fileIdOfIcon)"/>
    </div>
    <div style="height: 10px"></div>
    <div style="text-align: center">
      <!-- 上传按钮 -->
      <el-button
          @click="$refs.dialogOfSave.open(item)"
          size="small">
        <kt-icon
            icon="el-icon-edit"></kt-icon>
      </el-button>
      <el-button type="danger" size="small">
        <kt-icon
            color="#fff"
            icon="el-icon-delete"></kt-icon>
      </el-button>
    </div>
  </div>

  <div style="height: 100px"></div>

  <div class="bottom">
    <!-- 添加单位 -->
    <el-button
        type="primary"
    calss="add-btn"
        @click="$refs.dialogOfSave.open()"
    >Add Unit</el-button>
  </div>

  <dialog-of-save
  ref="dialogOfSave"
  @save="getAll()"
  ></dialog-of-save>

</div>
</template>

<style scoped lang="scss">

.card{
  display: inline-block;
  text-align: center;
  width: 200px;
  padding: 10px;
  margin: 10px;
  border-radius: 20px;

  .card-title{
    font-size: 16px;
    font-weight: bold;
    .card-title-a{
      display: inline-block;
    }
    .card-title-b{
      display: inline-block;
      color: #ff0000;
      margin-left: 4px;
    }
  }

  .card-img{
    width: 40px;
  }
}

.bottom{
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: right;
  padding: 10px;
  box-sizing: border-box;
}

</style>